<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getSerchByName">
            <el-button slot="append" icon="el-icon-search" @click="getSerchByName"></el-button>
          </el-input>
        </el-col>
		<!-- Form -->
		 <div style="margin-top: 10px">
		    <el-radio-group v-model="queryInfo2.query" @change="getSerchBySort" size="small">
			  <el-radio-button label="" >全部</el-radio-button>
		      <el-radio-button label="数码电子" ></el-radio-button>
		      <el-radio-button label="日用百货"></el-radio-button>
		      <el-radio-button label="化妆品"></el-radio-button>
		      <el-radio-button label="食品"></el-radio-button>
			  <el-radio-button label="文具"></el-radio-button>
			  <el-radio-button label="玩具"></el-radio-button>
			  <el-radio-button label="书籍"></el-radio-button>
		    </el-radio-group>
		  </div>
      </el-row>
      <!-- 表格数据 -->
	  <el-table
	      :data="goodsList"
	      style="width: 100%">
	      <el-table-column type="expand">
	        <template slot-scope="props">
	          <el-form label-position="left" inline class="demo-table-expand">
	            <el-form-item label="商品名称">
	              <span>{{ props.row.name }}</span>
	            </el-form-item>
	            <el-form-item label="价格(元)">
	              <span>{{ props.row.price }}</span>
	            </el-form-item>
	            <el-form-item label="商品 ID">
	              <span>{{ props.row.id }}</span>
	            </el-form-item>
	            <el-form-item label="发布者">
	              <span>{{ props.row.poster }}</span>
	            </el-form-item>
	            <el-form-item label="商品分类">
	              <span>{{ props.row.sort }}</span>
	            </el-form-item>
	            <el-form-item label="商品描述">
	              <span>{{ props.row.description }}</span>
	            </el-form-item>
	          </el-form>
	        </template>
	      </el-table-column>
	      <el-table-column
	        label="商品 ID"
	        prop="id">
	      </el-table-column>
	      <el-table-column
	        label="商品名称"
	        prop="name">
	      </el-table-column>
		  <el-table-column
		    label="商品价格"
		    prop="price">
		  </el-table-column>
	      <el-table-column
	        label="发布者"
	        prop="poster">
	      </el-table-column>
		  
		  <el-table-column label="操作">
		        <template slot-scope="scope">
		          <el-button
				    icon="el-icon-star-off"
		            size="mini"
		            @click="handleDelete(scope.row.id)"></el-button>
		        </template>
		      </el-table-column>
	    </el-table>
      </el-card>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'
//import Login from"../components/Login.vue"
export default {
	created () {
    this.getGoodsList()
	this.getSerchByName()
  },
  data () {
    return {
      queryInfo:{
		query: '',
        pageNum: 1,
        pageSize: 5,
		},
        /**/
      queryInfo2:{
      	query: '',
        pageNum: 1,
        pageSize: 5,
      		},
	  // 添加商品的表单对象
	  dialogFormVisible: false,
	  form: {
	    name: '',
	    price: 0,
	    poster: '',
	    description: '',
	    sort: '',
		studentid:JSON.parse(window.sessionStorage.getItem('userInfo')).id,
	  },
	  formRules: {
	    name: [
	      { required: true, message: '请输入商品名称', trigger: 'blur' }
	    ],
	    price: [
	      { required: true, message: '请输入商品价格', trigger: 'blur' }
	    ],
	    poster: [
	      { required: true, message: '请输入发布者', trigger: 'blur' }
	    ],
	    description: [
	      { required: true, message: '请输入商品描述', trigger: 'blur' }
	    ],
	    sort: [
	      { required: true, message: '请选择商品分类', trigger: 'blur' }
	    ]
	  },
	  // 商品列表
	  cateList: [ 
	  
	        {
	  
	          cat_id: '数码电子',
	  
	          cat_name: '数码电子'
	  
	        }, {
	  
	          cat_id: '日用百货',
	  
	          cat_name: '日用百货'
	  
	        }, {
	  
	          cat_id: '化妆品',
	  
	          cat_name: '化妆品'
	  
	        }, {
	  
	          cat_id: '食品',
	  
	          cat_name: '食品'
	  
	        },{
	  
	          cat_id: '书籍',
	  
	          cat_name: '书籍'
	  
	        },{
	  
	          cat_id: '文具',
	  
	          cat_name: '文具'
	  
	        },{
	  
	          cat_id: '玩具',
	  
	          cat_name: '玩具'
	  
	        }],
	  // 级联选择器配置
	  cascaderProps: {
	    expandTrigger: 'hover',
	    label: 'cat_name',
	    value: 'cat_id',
	    children: 'children'
	  },
      // 商品列表
      goodsList: [],
      // 商品总数
      total: 0,
	  formLabelWidth: '120px'
    }
  },
  
  methods: {
    // 根据分页获取对应的商品列表
	async getGoodsList () {
	      const { data:resString } = await this.$http.get('products',{params:this.queryInfo})
		  //console.log(JSON.parse(window.sessionStorage.getItem('userInfo')).userId);
		  var res = JSON.parse(resString); //json转换为js对象
		  //console.log(res.numbers);
		  this.goodsList = res.Product;
		  this.total = res.numbers;
    },
	async getSerchByName () {
		  //console.log(this.queryInfo);
	      const { data:resString1 } = await this.$http.get('getByName',{params:this.queryInfo})
		  //console.log(resString1);
		  var res1 = JSON.parse(resString1); //json转换为js对象
		  //console.log(res1.numbers);
		  this.goodsList = res1.data;
		  this.total = res1.numbers;
	},
	async getSerchBySort () {
		  //console.log(this.queryInfo2);
	      const { data:resString2 } = await this.$http.get('getBySort',{params:this.queryInfo2})
		  //console.log(resString2);
		  var res2 = JSON.parse(resString2); //json转换为js对象
		  //console.log(res2.numbers);
		  this.goodsList = res2.data;
		  this.total = res2.numbers;
	},
    handleSizeChange (newSize) {
	//console.log('newSize:',newSize);
      this.queryInfo.pageSize = newSize
      this.getGoodsList()
    },
    handleCurrentChange (newPage) {
	//console.log('newPage:',newPage);
      this.queryInfo.pageNum = newPage
      this.getGoodsList()
    },
	
	// 级联选择器选中项变化时出发
	handleChange () {
	  if (this.form.sort.length !== 1) {
	    this.form.sort = []
	  }
	},
	beforeTabLeave (activeName, odlActiveName) {
	  // 未选中商品分类阻止Tab标签跳转
	  if (odlActiveName === '0' && this.form.sort.length !== 1) {
	    this.$message.error('请先选择商品分类')
	    return false
	  }
	},
  }
}
</script>

<style lang='less' scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-checkbox {
    margin: 0 8px 0 0 !important;
  }
  .previewImg{
    width: 100%;
  }
  btnAdd{
    margin-top: 15px
  }
  .el-breadcrumb {
  	margin-left: 5px;
  	margin-top: 5px;
  	margin-bottom: 5px;
  	font-size: 17px;
  	font-weight: 700;
  }
</style>

